<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!---->
        <h1>你喜欢什么食物</h1>
        <input type="checkbox" @change="fullcheck()" v-model="all">全选<br>
        <span v-for="(item,index) in list"><input type="checkbox" @change="checkClick()" v-model="item.check">{{item.name}}</span><br>
        新增:<input type="text" v-model="name"><br>
        <input type="file" @change="load($event)"><button @click="add">上传</button><br>
        <span v-for="(item,index) in list"><img :src="item.src" style="width: 350px;height: 250px;" v-show="item.check"></span><br>
        <button @click="allCheck">全选</button><button @click="allNo">全不选</button><button @click="change">反选</button>
</body>
</html>
<script>
    const appConn = Vue.createApp({
        data(){
            return{
                list:[{name:'冰激凌',check:false,src:'./1.jpg'},
                      {name:'巧克力',check:false,src:'./2.jpg'},
                      {name:'火锅',check:false,src:'./3.jpg'},
                      {name:'蛋糕',check:false,src:'./4.jpg'},
                ],
                all:false,
                fileSrc:'',
                name:''
            }
        },
        methods: {
            fullcheck(){
                if(this.all){
                    this.list.map(v=>{
                        v.check=true
                    })
                }else{
                    this.list.map(v=>{
                        v.check=false
                    })
                }
            },
            checkClick(){
                let len = this.list.length
                this.list.map(v=>{
                    if(!v.check){
                        len--
                    }
                })
                if(len<this.list.length){
                    this.all=false
                }else{
                    this.all=true
                }
            },
            load(e){
                let file = e.target.files
                let img = new FileReader()
                img.readAsDataURL(file[0])
                img.onload = ({target})=>{
                    alert("上传成功")
                    this.fileSrc=target.result
                }
            },
            add(){
                this.list.push({name:this.name,check:false,src:this.fileSrc})
            },
            allCheck(){
                this.list.map(v=>{
                        v.check=true
                    })
            },
            allNo(){
                this.list.map(v=>{
                        v.check=false
                    })
            },
            change(){
                this.list.map(v=>{
                        v.check=!v.check
                    })
            }
        },
    }).mount("#app")
</script>